<script lang="ts" setup>
import img_7 from '@/assets/career_progress_ivdb.svg'
import img_6 from '@/assets/connected_world_wuay.svg'
import img_4 from '@/assets/data_trends_b0wg.svg'
import homeBg from '@/assets/home.png'
import svg_1 from '@/assets/main/svg_1.svg'
import img_8 from '@/assets/new_ideas_jdea.svg'
import img_1 from '@/assets/performance_overview_p9bm.svg'
import img_3 from '@/assets/researching_22gp.svg'
import img_2 from '@/assets/security_on_ff2u.svg'
import img_5 from '@/assets/teaching_f1cm.svg'
import { TITLE } from '@/config'
import { useSiteSetting } from '@/hooks/siteSettings'
import particlesConfig from '@/plugins/particles/config/home.json'
import { usePortalStore } from '@/stores/portal'
import { computed, resolveComponent } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'

import {
  briefInfoDocument,
  introduceInfoDocument,
} from '@/common/documents/main'
import { Route } from '@/router'

const { t, locale } = useI18n()

const defaultBriefInfoImages = [img_1, img_2, img_3, img_4]
const defaultIntroduceInfoImages = [img_5, img_6, img_7, img_8]
const briefInfo = computed(() => {
  const temp = briefInfoDocument[locale.value] ?? briefInfoDocument['zh']
  return temp.map((info, key: number) => {
    info.img = defaultBriefInfoImages[key]
    return info
  })
})

const introduceInfo = computed(() => {
  const temp =
    introduceInfoDocument[locale.value] ?? introduceInfoDocument['zh']
  return temp.map((info, key: number) => {
    info.img = defaultIntroduceInfoImages[key]
    return info
  })
})

const particles = resolveComponent('Particles')
const router = useRouter()

// 站点设置
const site = useSiteSetting()

const portalStorage = usePortalStore()
</script>

<template>
  <div class="relative gradient">
    <div class="relative w-full" style="min-height: 80vh">
      <particles
        id="particles"
        :options="particlesConfig"
        class="absolute w-full h-full top-0 left-0"
      />
      <div class="flex items-center justify-between">
        <div
          class="flex flex-col items-start justify-center text-left w-180 mt-10 ml-21 2xl:mt-52.5 2xl:ml-60"
        >
          <h1 class="text-5xl font-bold leading-tight w-150">
            {{ site.siteSetting.value.title[locale] || TITLE }}
          </h1>
          <p class="text-2xl mt-65px">
            {{ site.siteSetting.value.description[locale] || TITLE }}
          </p>
          <a-button
            class="z-10 text-mainColor h-50px text-lg mt-10 w-52.5 transition duration-300 ease-in-out transform bg-white rounded-full shadow-lg focus:outline-none focus:shadow-outline hover:(text-white scale-105)"
            type="primary"
            @click="
              () => {
                router.replace({ name: Route.COMPETITION })
              }
            "
            >{{ t('main.button') }}
          </a-button>
        </div>
        <div class="ml-40 w-180 2xl:w-250 2xl:ml-40">
          <img
            :src="portalStorage?.portal?.extends?.main_svg_path ?? homeBg"
            class="w-150 2xl:w-180"
          />
        </div>
      </div>
    </div>

    <img :src="svg_1" class="block object-cover mt-10 lg:-mt-24" />

    <section class="py-8 bg-white">
      <div class="container max-w-5xl m-8 mx-auto">
        <h1
          class="w-full my-2 text-5xl font-bold leading-tight text-center text-fonts-400"
        >
          {{ t('main.title_1') }}
        </h1>
        <div class="w-full mb-4">
          <div
            class="w-64 h-1 py-0 mx-auto my-0 rounded-t opacity-25 gradient"
          />
        </div>

        <a-row :gutter="[16, 16]">
          <a-col v-for="(item, index) in introduceInfo" :span="24">
            <a-row align="middle">
              <a-col :span="12" :order="index % 2 == 0 ? 1 : 0">
                <img :src="item.img" alt="" class="w-full" />
              </a-col>
              <a-col :span="12">
                <div class="p-6">
                  <h3
                    class="mb-3 text-3xl font-bold leading-none text-gray-800"
                  >
                    {{ item.title }}
                  </h3>
                  <p class="mb-8 text-lg text-gray-600">{{ item.content }}</p>
                </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>
    </section>
    <section class="py-8 bg-white">
      <div class="container flex flex-wrap pt-4 pb-12 mx-auto">
        <h1
          class="w-full my-2 text-5xl font-bold leading-tight text-center text-fonts-400"
        >
          {{ t('main.title_2') }}
        </h1>
        <div class="w-full mb-4">
          <div
            class="w-64 h-1 py-0 mx-auto my-0 rounded-t opacity-25 gradient"
          />
        </div>
        <div
          v-for="item in briefInfo"
          class="flex flex-col flex-grow flex-shrink w-1/4 h-auto p-6"
        >
          <div
            class="flex-1 pt-4 overflow-hidden bg-white rounded-t rounded-b-none shadow-lg border-t-1"
          >
            <div class="w-full px-6 mb-6 text-xl font-bold text-gray-800 h-50">
              <img :src="item.img" class="w-full h-full" />
            </div>
            <p class="px-6 mb-5 text-base text-gray-800">
              {{ item.content }}
            </p>
          </div>
          <div
            class="flex-none p-6 mt-auto overflow-hidden bg-white rounded-t-none rounded-b shadow"
          >
            <div class="flex items-center justify-center text-xl text-gray-600">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
